<template>
  <div class="app-container">
    <!-- 概况 -->
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select placeholder="选择门店" v-model="store_id" style="width:300px" filterable>
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <div v-if="power.today==1||power.month==1" class="conta_Survey">
        <div v-if="power.today==1" class="sur_le" @mouseout="out(1)">
          <div class="s_tit"><span class="jk">今日概况</span><span class="xz">新增会员</span><span class="nm"> {{todayData.count}}</span></div>
          <div class="s_yuan">
            <div class="s_yl">
              <div class="s_t">营收</div>
              <div class="s_tt"><span class="money">{{todayData.incomeVaue}}</span><span class="yuan">元</span></div>
              <div class="s_ts">完成今日目标值 {{todayData.incomeRatio}}%</div>
              <!-- 右边查看详情 -->
              <div class="temple" @mousemove="info(1)" @mouseout="out(1)">
                <div class="more">
                  <img src="../../assets/images/mores.png" alt="">
                </div>
                <!-- 查看详情 -->
                <div class="detail" @click="goInfo(1)" v-show="ismore">查看详情</div>
              </div>
            </div>
            <div class="s_yr">
              <div class="s_t">机台消费</div>
              <div class="s_tt"><span class="money">{{todayData.exVaue}}</span><span class="yuan">元</span></div>
              <div class="s_ts">完成今日目标值 {{todayData.exRatio}}%</div>
              <div class="temple" @mousemove="info(9)" @mouseout="out(9)">
                <div class="more">
                  <img src="../../assets/images/mores.png" alt="">
                </div>
                <!-- 查看详情 -->
                <div class="detail" @click="goInfo(2)" v-show="ismore9">查看详情</div>
              </div>
            </div>
          </div>
          <!-- 浮动元素 -->
          <div class="hr"></div>
          <!-- 更多 -->
        </div>
        <div v-if="power.today==1" class="sur_midd"></div>
        <div v-if="power.month==1" class="sur_ri">
          <div class="s_tit"><span class="jk">本月概况</span><span class="xz">新增会员</span><span class="nm"> {{monData.count}}</span></div>
          <div class="s_yuan">
            <div class="s_ylt">
              <div class="s_t">营收</div>
              <div class="s_tt"><span class="money">{{monData.incomeVaue}}</span><span class="yuan">元</span></div>
              <div class="s_ts">完成本月目标值 {{monData.incomeRatio}}%</div>
              <div class="temple by" @mousemove="info(2)" @mouseout="out(2)">
                <div class="more two">
                  <img src="../../assets/images/mores.png" alt="">
                </div>
                <!-- 查看详情 -->
                <div class="detail" @click="goInfo(1)" v-show="ismore1">查看详情</div>
              </div>
            </div>
            <div class="s_ylt">
              <div class="s_t">机台消费</div>
              <div class="s_tt"><span class="money">{{monData.exVaue}}</span><span class="yuan">元</span></div>
              <div class="s_ts">完成本月目标值 {{monData.exRatio}}%</div>
            </div>
            <div class="s_ylt">
              <div class="s_t">门禁消费</div>
              <div class="s_tt">
                <span class="money">{{monData.passValue!=''?monData.passValue:'-'}}</span>
                <span class="yuan">元</span>
              </div>
              <div class="s_ts">完成本月目标值 {{monData.passRatio}}%</div>
              <div class="temple bc" @mousemove="info(10)" @mouseout="out(10)">
                <div class="more two">
                  <img src="../../assets/images/mores.png" alt="">
                </div>
                <!-- 查看详情 -->
                <div class="detail " @click="goInfo(2)" v-show="ismore10">查看详情</div>
              </div>
            </div>
          </div>
          <!-- 浮动元素 -->
          <div class="hrs"></div>
          <!-- 更多 -->
        </div>
      </div>
      <div style="padding:20px 0">
        <el-row :gutter="20">
          <el-col v-if="power.income==1" :span="8" class="posrea">
            <div class="temples" @mousemove="info(3)" @mouseout="out(3)">
              <div class="more two">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail colo" @click="goInfo(1)" v-show="ismore2">查看详情</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="incomeChart.source.length==0" class="nullSata">未获取到数据</div>

            <div style="background:#fff;margin-bottom:20px">
              <div class="chart_title">
                营业额趋势图
                <span style="font-size:12px;margin-left:10px;color:#999">{{imFormInLine.begin_time}}</span> ~
                <span style="font-size:12px;color:#999">{{imFormInLine.end_time}}</span>
              </div>
              <line-chart :chart-data="incomeChart" :selectedData="incomeSelected" :showLegend="showLegend" :legendData="incomeLegend" :height="chartHeight" />
            </div>
          </el-col>
          <el-col v-if="power.ex==1" :span="8" class="posrea">
            <div class="temples qush" @mouseout="out(4)">
              <div class="more two" @mousemove="info(4)">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail" @click="goInfo(2)" @mousemove="info(4)" v-if="ismore3">查看详情</div>
              <div class="detail colo" v-if="ismore3" @mousemove="info(4)" @click="checkCoins(0)">切换为币</div>
              <div class="detail colo" v-if="ismore3" @mousemove="info(4)" @click="checkCoins(1)">切换为元</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="exChart.source.length==0" class="nullSata">未获取到数据</div>

            <div style="background:#fff;margin-bottom:20px">
              <div class="chart_title">消费额趋势图（机台）
                <span style="font-size:12px;margin-left:10px;color:#999">{{imFormInLine.begin_time}}</span> ~
                <span style="font-size:12px;color:#999">{{imFormInLine.end_time}}</span>
              </div>
              <line-chart :chart-data="exChart" :selectedData="exSelected" :showLegend="showLegend" :legendData="incomeLegend" :yAxisName="yAxisName"
                :height="chartHeight" />
            </div>
          </el-col>
          <el-col v-if="power.im==1" :span="8" class="posrea">
            <div class="temples" @mouseout="out(5)">
              <div class="more two" @mousemove="info(5)">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail colo" @mousemove="info(5)" @click="goInfo(3)" v-show="ismore4">查看详情</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="imChart.source.length==0" class="nullSata">未获取到数据</div>

            <div style="background:#fff;margin-bottom:20px;box-sizing:border-box;padding-bottom:10px;position:relative">
              <div class="chart_title">机台利率监控
                <span style="font-size:12px;margin-left:10px;color:#999">{{imFormInLine.begin_time}}</span> ~
                <span style="font-size:12px;color:#999">{{imFormInLine.end_time}}</span>
              </div>
              <div class="bar-legend" style="width:324px">
                <div class="bar-item" style="width:120px">
                  <div class="bar-color-ratio">
                    <div class="one"></div>
                    <div class="tow"></div>
                    <div class="three"></div>
                    <div class="four"></div>
                  </div>
                  <span class="text">利率偏差</span>
                  <div @click="sortData(0)" class="sort">
                    <div class="sort-head" :class="{showTop:showChart==0&&orderRatio==0,showBot:showChart==0&&orderRatio==1}"></div>
                    <div class="sort-body" :class="{show:showChart==0}"></div>
                  </div>
                </div>
                <div class="bar-item">
                  <div class="bar-color blue"></div>
                  <span class="text">收币数</span>
                  <div @click="sortData(1)" class="sort">
                    <div class="sort-head" :class="{showTop:showChart==1&&orderCoins==0,showBot:showChart==1&&orderCoins==1}"></div>
                    <div class="sort-body" :class="{show:showChart==1}"></div>
                  </div>
                </div>
                <div class="bar-item">
                  <div class="bar-color orange"></div>
                  <span class="text">收币金额</span>
                  <div @click="sortData(2)" class="sort">
                    <div class="sort-head" :class="{showTop:showChart==2&&orderMoney==0,showBot:showChart==2&&orderMoney==1}"></div>
                    <div class="sort-body" :class="{show:showChart==2}"></div>
                  </div>
                </div>
              </div>
              <LineBarChart :chartData="imChart" :chartSet="imSet" :chartType="imType" :height="imHeight"></LineBarChart>
            </div>
          </el-col>
          <el-col v-if="power.wb==1" :span="8" class="posrea">

            <div class="temples" @mousemove="info(6)" @mouseout="out(6)">
              <div class="more two">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail colo" @click="goInfo(4)" v-show="ismore5">查看详情</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="wbChart.source.length==0" class="nullSata">未获取到数据</div>
            <div style="background:#fff;margin-bottom:20px">
              <div class="chart_title">腕带数据统计<span style="font-size:12px;margin-left:10px;color:#999">今日实时</span></div>
              <WristbandChart :chartData="wbChart" :chartSet="wbSet" :chartType="wbType" :height="chartHeight"></WristbandChart>
            </div>
          </el-col>
          <el-col v-if="power.olWarning==1" :span="8" class="posrea">
            <div class="temples" @mousemove="info(7)" @mouseout="out(7)">
              <div class="more two">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail colo" @click="goInfo(5)" v-show="ismore6">查看详情</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="omChart.source.length==0" class="nullSata">暂无机台离线</div>
            <div class="om" style="background:#fff;margin-bottom:20px;position:relative">
              <div class="chart_title">机台离线预警<span style="font-size:12px;margin-left:10px;color:#999">今日实时</span></div>
              <div class="bar-legend" style="width:290px">
                <div class="bar-item">
                  <div class="bar-color blue"></div>
                  <div class="text">0-30分钟</div>
                </div>
                <div class="bar-item">
                  <div class="bar-color yellow"></div>
                  <div class="text">31-60分钟</div>
                </div>
                <div class="bar-item">
                  <div class="bar-color orange"></div>
                  <div class="text">61-120分钟</div>
                </div>
                <div class="bar-item">
                  <div class="bar-color red"></div>
                  <div class="text">120分钟以上</div>
                </div>
              </div>
              <div>
                <bar-chart :chartData="omChart" :height="chartHeight" />
              </div>
            </div>
          </el-col>
          <el-col v-if="power.networkF==1" :span="8" class="posrea">
            <div class="temples" @mousemove="info(8)" @mouseout="out(8)">
              <div class="more two">
                <img src="../../assets/images/mores.png" alt="">
              </div>
              <!-- 查看详情 -->
              <div class="detail colo" @click="goInfo(5)" v-show="ismore7">查看详情</div>
            </div>
            <!-- 未获取到数据时显示 -->
            <div v-show="networkData.length==0" class="nullSata">暂无机台网络波动</div>

            <div class="om" style="background:#fff;margin-bottom:20px;">
              <div class="chart_title">机台网络波动<span style="font-size:12px;margin-left:10px;color:#999">今日实时</span></div>
              <div class="network">
                <div class="networkTitle">近60分钟波动次数</div>
                <div class="bar-legend" style="width:100px">
                  <div class="bar-item">
                    <div class="bar-color online"></div>
                    <div class="text">在线</div>
                  </div>
                  <div class="bar-item">
                    <div class="bar-color offline"></div>
                    <div class="text">离线</div>
                  </div>
                </div>
                <el-row v-for="(data,i) of networkData" :key="i" style="margin-bottom:25px">
                  <el-col :span="2" style="text-align:right;padding-right:10px;font-size:12px">{{data[0].count}}次</el-col>
                  <el-col :span="20">
                    <div class="bar-network">
                      <div class="bar-item" :style="{left:item.left+'%',width:item.width+'%'}" :class="{'online':item.state==1,'offline':item.state==0}"
                        v-for="(item,i) of data" :key="i"></div>
                    </div>
                    <div class="intro">{{data[0].area_name}} - {{data[0].type_name}} - {{data[0].no}}/{{data[0].machine_id}}</div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

 <script>
import LineChart from './components/LineChart';
import LineBarChart from './components/LineBarChart';
import WristbandChart from './components/WristbandChart';
import BarChart from './components/BarChart';
import { getStoreList, incomeToday, incomeTime, exToday, exTime, imChart, wbChart, olWarning, networkF, power } from '@/api/dashboard/index';

export default {
  name: 'Dashboard',
  components: {
    LineChart,
    LineBarChart,
    WristbandChart,
    BarChart
  },
  data() {
    return {
      ismore: false,
      ismore1: false,
      ismore2: false,
      ismore3: false,
      ismore4: false,
      ismore5: false,
      ismore6: false,
      ismore7: false,
      ismore8: false,
      ismore9: false,
      ismore10: false,
      power: {
        today: 0,
        month: 0,
        income: 0,
        ex: 0,
        im: 0,
        wb: 0,
        olWarning: 0,
        networkF: 0
      },
      pagePower: {
        income: 0,
        ex: 0,
        im: 0,
        wb: 0,
        olWarning: 0
      },
      storeList: [],
      prevStoreId: '',
      showCoins: 0,
      showChart: 0,
      orderRatio: 1,
      orderCoins: 1,
      orderMoney: 1,
      store_id: '',
      formInline: {
        store_id: ''
      },
      imFormInLine: {
        store_id: '',
        type: 1,
        area_id: '',
        order_key: 'profit_difference',
        order_value: 'desc',
        coins_min: '',
        coins_max: '',
        is_mapping: 0,
        percentage: 0,
        negative: 0,
        begin_time: '',
        end_time: ''
      },
      chartHeight: '240px',
      imHeight: '230px',
      week: [' 周日', ' 周一', ' 周二', ' 周三', ' 周四', ' 周五', ' 周六'],
      showLegend: true,
      yAxisName: '元',
      incomeLegend: ['考核值', '实际完成值'],
      incomeSelected: {
        考核值: true,
        实际完成值: true
      },
      incomeChart: {
        dimensions: ['product', '考核值', '实际完成值'],
        source: []
      },
      exSelected: {
        考核值: true,
        实际完成值: true
      },
      exChart: {
        dimensions: ['product', '考核值', '实际完成值'],
        source: []
      },
      imChart: {
        dimensions: ['project_id', 'profit_difference', 'coins', 'money'],
        source: []
      },
      imSet: {
        xName: '卡头ID',
        yName: '利率偏差 ( % )'
      },
      imType: [{ type: 'bar' }, { type: 'line' }, { type: 'line', color: '#ffa216' }],
      wbChart: {
        dimensions: ['time', '入场人数', '出场人数', '在场人数'],
        source: []
      },
      wbSet: {
        xName: '时间',
        yName: '人数'
      },
      wbType: [
        { type: 'bar', color: '#fa9d58' },
        { type: 'bar', color: '#93bcf5' },
        { type: 'line', color: '#9e95f1' }
      ],
      omChart: {
        dimensions: ['clevice_id', 'minute'],
        source: []
      },
      networkData: [],
      todayData: {
        incomeVaue: '',
        incomeTarget: '',
        incomeRatio: '',
        exVaue: '',
        exTarget: '',
        exRatio: '',
        count: ''
      },
      monData: {
        incomeVaue: '',
        incomeRatio: '',
        exVaue: '',
        exRatio: '',
        count: '',
        passValue: '',
        passRatio: ''
      }
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    info(data) {
      if (data == 1) {
        this.ismore = true;
      }
      if (data == 2) {
        this.ismore1 = true;
      }
      if (data == 3) {
        this.ismore2 = true;
      }
      if (data == 4) {
        this.ismore3 = true;
      }
      if (data == 5) {
        this.ismore4 = true;
      }
      if (data == 6) {
        this.ismore5 = true;
      }
      if (data == 7) {
        this.ismore6 = true;
      }
      if (data == 8) {
        this.ismore7 = true;
      }
      if (data == 9) {
        this.ismore9 = true;
      }
      if (data == 10) {
        this.ismore10 = true;
      }
    },
    out(data) {
      if (data == 1) {
        this.ismore = false;
      }
      if (data == 2) {
        this.ismore1 = false;
      }
      if (data == 3) {
        this.ismore2 = false;
      }
      if (data == 4) {
        this.ismore3 = false;
      }
      if (data == 5) {
        this.ismore4 = false;
      }
      if (data == 6) {
        this.ismore5 = false;
      }
      if (data == 7) {
        this.ismore6 = false;
      }
      if (data == 8) {
        this.ismore7 = false;
      }
      if (data == 9) {
        this.ismore9 = false;
      }
      if (data == 10) {
        this.ismore10 = false;
      }
    },
    searchClick() {
      this.fetchData();
    },
    // 门店列表获取
    getStore() {
      this.listLoading = true;
      getStoreList({ look_del: 0, category_id: 429 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (response.length > 0) {
          this.store_id = data.length > 0 ? data[0].id : response[0].id;
          this.fetchData();
        }
      });
    },
    fetchData() {
      this.formInline.store_id = this.store_id;
      power({}).then(res => {
        if (res.code == 1) {
          this.power.today = 0;
          this.power.month = 0;
          this.power.income = this.pagePower.income = 0;
          this.power.ex = this.pagePower.ex = 0;
          this.power.im = this.pagePower.im = 0;
          this.power.wb = this.pagePower.wb = 0;
          this.power.olWarning = this.pagePower.olWarning = 0;
          this.power.networkF = 0;
          this.power.today = res.message.category['今日概况'];
          this.power.month = res.message.category['本月概况'];
          this.power.income = res.message.category['营业额趋势图'];
          this.power.ex = res.message.category['消费额趋势图'];
          this.power.im = res.message.category['机台利率图'];
          this.power.wb = res.message.category['腕带数据统计'];
          this.power.olWarning = res.message.category['机台离线图'];
          this.power.networkF = res.message.category['机台波动图'];
          let date = this.getDate(-7, -1);
          this.prevStoreId = this.formInline.store_id;
          this.incomeChart.source = [];
          this.wbChart.source = [];
          this.omChart.source = [];
          this.networkData = [];
          if (res.message.use_category.length > 0) {
            res.message.use_category.forEach(val => {
              if (val == '404') {
                this.pagePower.income = 1;
              }
              if (val == '408') {
                this.pagePower.ex = 1;
              }
              if (val == '406') {
                this.pagePower.im = 1;
              }
              if (val == '422') {
                this.pagePower.wb = 1;
              }
              if (val == '407') {
                this.pagePower.olWarning = 1;
              }
            });
          }
          if (this.power.today || this.power.month || this.power.income || this.power.ex) {
            //营收
            incomeToday({ store_id: this.formInline.store_id }).then(res => {
              if (res.code == 1) {
                //今日营收
                this.todayData.incomeVaue = (res.data.today_actual_turnover.actual_turnover / 1).toFixed(2);
                this.todayData.incomeTarget = res.data.today_actual_turnover.target_turnover / 100;
                this.todayData.incomeRatio = this.todayData.incomeTarget > 0 ? ((this.todayData.incomeVaue / this.todayData.incomeTarget) * 100).toFixed(2) : 0;
                //本月营收
                this.monData.incomeVaue = (res.data.month_actual_turnover.actual_turnover / 1).toFixed(2);
                let target = res.data.month_actual_turnover.target_turnover / 100;
                this.monData.incomeRatio = target > 0 ? ((this.monData.incomeVaue / target) * 100).toFixed(2) : 0;
                //营收图表
                incomeTime({ store_id: this.formInline.store_id, begin_time: date[0], end_time: date[1] }).then(res => {
                  if (res.code == 1) {
                    for (let val of res.data.list) {
                      let weekIndex = new Date(val.time).getDay();
                      this.incomeChart.source.unshift({
                        product: val.time + this.week[weekIndex],
                        考核值: (val.target_turnover / 100).toFixed(2),
                        实际完成值: (val.actual_turnover / 1).toFixed(2)
                      });
                    }
                  }
                });
              }
            });

            //消费
            exToday({ store_id: this.formInline.store_id, type: 0, coin_type: this.showCoins }).then(res => {
              if (res.code == 1) {
                //今日消费
                this.todayData.exVaue = res.message.today_actual_turnover / 1;
                this.todayData.exTarget = res.message.today_target_turnover / 1;
                this.todayData.exRatio = this.todayData.exTarget > 0 ? ((this.todayData.exVaue / this.todayData.exTarget) * 100).toFixed(2) : 0;
                this.todayData.count = res.message.today_count / 1;
                //本月消费
                this.monData.exVaue = res.message.mouth_actual_turnover.toFixed(2);
                let target = res.message.mouth_target_turnover / 1;
                this.monData.exRatio = target > 0 ? ((this.monData.exVaue / target) * 100).toFixed(2) : 0;
                this.monData.count = res.message.mouth_count / 1;
                //本月门禁
                this.monData.passValue = (res.message.mouth_entrance_actual_turnover / 1).toFixed(2);
                let passTarget = (res.message.mouth_entrance_target_turnover / 100).toFixed(2);
                this.monData.passRatio = passTarget > 0 ? ((this.monData.passValue / passTarget) * 100).toFixed(2) : 0;
                //消费图表
                this.getEX();
              }
            });
          }

          //利率
          if (this.power.im) {
            this.getIM();
          }

          //腕带
          if (this.power.wb) {
            wbChart({ store_id: this.formInline.store_id, start_time: date[2] }).then(res => {
              if (res.code == 1) {
                let source = [];
                let data = res.message[0].data;
                if (data.length > 0) {
                  data.forEach(val => {
                    val.hm = val.time.split(' ')[1];
                    val.on_hand = val.in_player - val.out_player;
                    val.in_player *= 1;
                    val.out_player *= 1;
                  });
                  let all = 0;
                  data.forEach(val => {
                    all += val.on_hand;
                    val.all_on_hand = all;
                  });
                  for (let val of data) {
                    let obj = {
                      time: val.hm,
                      入场人数: val.in_player,
                      出场人数: val.out_player,
                      在场人数: val.all_on_hand
                    };
                    source.push(obj);
                  }
                }
                this.wbChart.source = source;
              }
            });
          }

          //机台离线
          if (this.power.olWarning) {
            olWarning({ store_id: this.formInline.store_id, area_id: '' }).then(res => {
              this.omChart.source = [];
              if (res.length > 0) {
                res.forEach(val => {
                  val.minute = Math.round(val.off_time / 60);
                  val.time = val.time.replace(/\//g, '-');
                });
                this.omChart.source = res.slice(0, 5);
              }
            });
          }

          //网络波动
          if (this.power.networkF) {
            networkF({ store_id: this.formInline.store_id, area_id: '' }).then(res => {
              this.networkData = [];
              if (res.length > 0) {
                res.forEach(list => {
                  let time = 0;
                  let allLeft = 0;
                  let totalTime = list.reduce((prev, item) => item.duration / 1 + prev, 0);
                  let l = 0;
                  list.forEach(val => {
                    l++;
                    val.left = allLeft;
                    val.width = (val.duration / totalTime) * 100 < 0.1 ? 0.1 : ((val.duration / totalTime) * 100).toFixed(1);
                    allLeft = (val.width / 1 + allLeft / 1).toFixed(1);
                    if (l == list.length) {
                      if (allLeft < 100) {
                        val.width = (val.width / 1 + 100 - allLeft / 1).toFixed(1);
                      } else if (allLeft > 100) {
                        val.width = (val.width / 1 - allLeft / 1 + 100).toFixed(1);
                      }
                      if (val.width < 0.1) {
                        val.width = 0.1;
                      }
                    }
                    time += val.duration / 1;
                  });
                });
                this.networkData = res.slice(0, 5);
              }
            });
          }
        }
      });
    },
    //消费图表
    getEX() {
      let date = this.getDate(-7, -1);
      this.exChart.source = [];
      exTime({ store_id: this.formInline.store_id, start_time: date[0], end_time: date[1], coin_type: this.showCoins, type: 0 }).then(res => {
        if (res.code == 1) {
          for (let val of res.message.list) {
            let weekIndex = new Date(val.time).getDay();
            if (this.showCoins == 0) {
              this.yAxisName = '元';
              this.exChart.source.push({
                product: val.time + this.week[weekIndex],
                考核值: (val.filtrate_target_turnover / 1).toFixed(2),
                实际完成值: (val.filtrate_actual_turnover / 1).toFixed(2)
              });
            } else {
              this.yAxisName = '币';
              this.exChart.source.push({
                product: val.time + this.week[weekIndex],
                考核值: Math.round(val.filtrate_target_turnover / 1),
                实际完成值: Math.round(val.filtrate_actual_turnover / 1)
              });
            }
          }
        }
      });
    },
    //利率
    getIM() {
      let date = this.getDate(-7, -1);
      this.imFormInLine.store_id = this.formInline.store_id;
      this.imChart.source = [];
      this.imFormInLine.begin_time = date[0];
      this.imFormInLine.end_time = date[1];
      imChart(this.imFormInLine).then(res => {
        if (res.length > 0) {
          res.forEach(val => {
            val.cost = Math.round(val.cost * 100) / 100;
            val.coins = val.coins / 1;
            val.money = Math.round(val.money * 100) / 100;
            val.profit = Math.round(val.profit * 10000) / 100;
            val.begin_time = date[0].replace(/\./g, '-');
            val.end_time = date[1].replace(/\./g, '-');
            val.profit_difference = Math.round(val.profit_difference * 10000) / 100;
          });
          this.imChart.source = res.slice(0, 10);
        }
      });
    },
    //利率排序
    sortData(i) {
      if (i == 0) {
        if (this.showChart != 0) {
          this.showChart = 0;
          this.orderRatio = 0;
          this.imFormInLine.order_key = 'profit_difference';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
          return;
        }
        this.showChart = 0;
        if (this.orderRatio == 0) {
          this.orderRatio = 1;
          this.imFormInLine.order_key = 'profit_difference';
          this.imFormInLine.order_value = 'desc';
          this.getIM();
        } else {
          this.orderRatio = 0;
          this.imFormInLine.order_key = 'profit_difference';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
        }
      } else if (i == 1) {
        if (this.showChart != 1) {
          this.showChart = 1;
          this.orderCoins = 0;
          this.imFormInLine.order_key = 'coins';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
          return;
        }
        this.showChart = 1;
        if (this.orderCoins == 0) {
          this.orderCoins = 1;
          this.imFormInLine.order_key = 'coins';
          this.imFormInLine.order_value = 'desc';
          this.getIM();
        } else {
          this.orderCoins = 0;
          this.imFormInLine.order_key = 'coins';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
        }
      } else {
        if (this.showChart != 2) {
          this.showChart = 2;
          this.orderMoney = 0;
          this.imFormInLine.order_key = 'money';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
          return;
        }
        this.showChart = 2;
        if (this.orderMoney == 0) {
          this.orderMoney = 1;
          this.imFormInLine.order_key = 'money';
          this.imFormInLine.order_value = 'desc';
          this.getIM();
        } else {
          this.orderMoney = 0;
          this.imFormInLine.order_key = 'money';
          this.imFormInLine.order_value = 'asc';
          this.getIM();
        }
      }
    },
    //切换币、元
    checkCoins(i) {
      if (i == 0) {
        this.showCoins = 1;
        this.yAxisName = '币';
        this.getEX();
        this.ismore3 = false;
      } else {
        this.showCoins = 0;
        this.yAxisName = '元';
        this.getEX();
        this.ismore3 = false;
      }
    },
    //查看详情
    goInfo(i) {
      switch (i) {
        case 1:
          if (this.pagePower.income) {
            this.$router.push({ name: 'dashboard/revenueStatistics', params: { store_id: this.formInline.store_id } });
            this.ismore = false;
            this.ismore1 = false;
            this.ismore2 = false;
            break;
          } else {
            this.$message.error('抱歉！没有操作权限！');
            break;
          }
        case 2:
          if (this.pagePower.ex) {
            this.$router.push({ name: 'dashboard/expenseTarget', params: { store_id: this.formInline.store_id } });
            this.ismore10 = false;
            this.ismore3 = false;
            this.ismore9 = false;
            break;
          } else {
            this.$message.error('抱歉！没有操作权限！');
            break;
          }
        case 3:
          if (this.pagePower.im) {
            this.$router.push({ name: 'dashboard/interestMonitor', params: { store_id: this.formInline.store_id } });
            this.ismore4 = false;
            break;
          } else {
            this.$message.error('抱歉！没有操作权限！');
            break;
          }
        case 4:
          if (this.pagePower.wb) {
            this.$router.push({ name: 'dashboard/wristbandAnalyze', params: { store_id: this.formInline.store_id } });
            this.ismore5 = false;
            break;
          } else {
            this.$message.error('抱歉！没有操作权限！');
            break;
          }
        case 5:
          if (this.pagePower.olWarning) {
            this.$router.push({ name: 'dashboard/offlineMonitor', params: { store_id: this.formInline.store_id } });
            this.ismore6 = false;
            this.ismore7 = false;
            break;
          } else {
            this.$message.error('抱歉！没有操作权限！');
            break;
          }
        default:
          break;
      }
    },
    getDate(num1, num2) {
      let date = new Date();
      let time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      let date1 = new Date(date);
      let date2 = new Date(date);
      date1.setDate(date1.getDate() + num1);
      let time1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate();
      date2.setDate(date2.getDate() + num2);
      let time2 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate();
      // console.log(time1,time2)
      return [time1, time2, time];
    }
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.nullSata {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  color: #999;
  font-size: 14px;
}
.customContainer {
  overflow-y: auto;
}
.chart-wrapper {
  background: #fff;
  padding: 15px;
  margin-bottom: 32px;
}
.conta_Survey {
  width: 100%;
  // min-width: 1200px;
  overflow: hidden;
  box-sizing: border-box;
  // padding: 0 1%;
}
.sur_le {
  width: 32.5%;
  float: left;
  background: white;
  box-sizing: border-box;
  padding: 10px 20px;
  position: relative;
  // margin-right: 20px;
}
.sur_midd {
  width: 1.3%;
  float: left;
  height: 199px;
}
.hr {
  position: absolute;
  width: 1px;
  height: 95px;
  background: gainsboro;
  top: 34%;
  left: 50%;
}
.hrs {
  position: absolute;
  width: 1px;
  height: 95px;
  background: gainsboro;
  top: 34%;
  left: 32.5%;
}
.hrst {
  position: absolute;
  width: 1px;
  height: 95px;
  background: gainsboro;
  top: 34%;
  left: 63.5%;
}
.s_tit,
.s_ts {
  padding: 15px 0;
}
.sur_ri {
  width: 66.2%;
  float: left;
  background: #fff;
  padding: 10px 20px;
  position: relative;
}
.jk {
  font-size: 18px;
  font-weight: bold;
}
.xz {
  font-size: 12px;
  color: #666;
  padding: 0 10px;
}
.nm {
  font-size: 10px;
  color: #999;
}
.posrea {
  position: relative;
}

.s_yuan {
  width: 100%;
  overflow: hidden;
}
.s_yl,
.s_yr {
  width: 50%;
  float: left;
  position: relative;
}
.s_yr {
  box-sizing: border-box;
  padding: 0 0 0 10px;
}
.s_ylt,
.s_ylt {
  width: 33%;
  float: left;
  position: relative;
}
.s_t {
  font-size: 14px;
  color: #999;
}
.s_tt {
  font-size: 16px;
  color: #999;
  padding: 20px 0;
}
.money {
  font-size: 24px;
  color: #333;
  font-weight: bold;
}
.s_ts {
  font-size: 14px;
  color: #999;
}
.yuan {
  margin-left: 5%;
  color: #999;
}
.temple {
  width: 80px;
  height: 54px;
  position: absolute;
  top: 0;
  right: 1%;
  cursor: pointer;
}
.by {
  right: 9%;
}
.bc {
  right: 0;
}
.temples {
  width: 80px;
  // height: 54px;
  position: absolute;
  top: 4%;
  right: 7.4%;
  cursor: pointer;
  z-index: 103;
}
.qush {
  height: 76px;
}
.more {
  margin-left: 73%;
}
.two {
  margin-left: 85%;
}
.more image {
  width: 20px;
  height: 20px;
}
.detail {
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 8px;
  color: #333;
  background: #f0f8ff;
  // position: absolute;
  // top: 20%;
  // right: 4%;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
}
.detail:hover {
  background: #ccc;
}
div.bar-legend {
  z-index: 100;
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  div.bar-item {
    text-align: center;
    width: 100px;
    margin: 8px 13px 0 0;
    div.bar-color {
      width: 20px;
      height: 5px;
      margin: 0 auto;
      margin-right: 2px;
      display: inline-block;
    }
    div.bar-color-ratio {
      display: inline-block;
      margin-right: 2px;
      div {
        width: 10px;
        height: 5px;
        float: left;
      }
      div.one {
        background: #ff4242;
      }
      div.tow {
        background: #ff7c07;
      }
      div.three {
        background: #fdc927;
      }
      div.four {
        background: #93ed39;
      }
    }
    div.sort {
      display: inline-block;
      position: relative;
      width: 10px;
      cursor: pointer;
      div.sort-head {
        position: relative;
        top: -1px;
        left: 4px;
        width: 8px;
        height: 8px;
        border: 2px solid #888;
        border-bottom-color: transparent;
        border-right-color: transparent;
        transform: rotate(45deg);
      }
      div.sort-head.showTop {
        border-top-color: #409eff;
        border-left-color: #409eff;
      }
      div.sort-head.showBot {
        border-top-color: #409eff;
        border-left-color: #409eff;
        transform: rotate(225deg);
        top: 2px;
      }
      div.sort-body {
        position: absolute;
        top: -1px;
        left: 7px;
        width: 2px;
        height: 12px;
        background: #888;
      }
      div.sort-body.show {
        background: #409eff;
      }
    }
    div.bar-color.blue {
      background: #5e9bdf;
    }
    div.bar-color.yellow {
      background: #fdc927;
    }
    div.bar-color.orange {
      background: #ff8f2b;
    }
  }
}
div.om {
  div.bar-legend {
    z-index: 100;
    position: absolute;
    top: 30px;
    right: 55px;
    display: flex;
    justify-content: space-around;
    font-size: 10px;
    div.bar-item {
      text-align: center;
      div.text {
        width: 70px;
        margin-top: 5px;
      }
      div.bar-color {
        width: 50px;
        height: 5px;
        margin: 0 auto;
      }
      div.bar-color.blue {
        background: #fdc927;
      }
      div.bar-color.yellow {
        background: #ff8f2b;
      }
      div.bar-color.orange {
        background: #ff4242;
      }
      div.bar-color.red {
        background: #bd2b2b;
      }
      div.bar-color.online {
        background: #50d57f;
      }
      div.bar-color.offline {
        background: #f86464;
      }
    }
  }
}
div.network {
  background: #fff;
  position: relative;
  padding: 10px 0;
  height: 240px;
  margin-bottom: 20px;
  div.networkTitle {
    margin-left: 15px;
    margin-bottom: 15px;
    font-size: 12px;
  }
  div.bar-legend {
    width: 50px;
    top: -8px;
    right: 30px;
    div.bar-item {
      width: 25px;
      div.bar-color,
      div.text {
        width: 25px;
      }
    }
  }
}
div.network div.bar-network {
  position: relative;
  div.bar-item {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 10px;
  }
  div.bar-item.online {
    background: rgba(80, 213, 127, 1);
  }
  div.bar-item.offline {
    background: rgba(248, 100, 100, 1);
  }
}
div.network div.intro {
  position: relative;
  top: 15px;
  left: 0;
  color: #999;
  font-size: 12px;
}
div.chart_title {
  padding: 15px 0 10px 15px;
}
</style> 